<template lang="">
	<view class="sg-table">
		<view
			v-for="(item, index) in tableData"
			:key="index"
			:class="{ white: index % 2, black: !(index % 2) }"
			class="table-line"
		>
			<view
				v-for="(data, index) in item"
				:key="index"
			>
				<text class="title">{{data && data.title}}</text>
				<text class="content">{{data && data.content}}</text>
			</view>
		</view>
	</view>
</template>
<script>
export default {
  data() {
    return {

    }
  },
  props: {
    tableData: {
      type: Array,
      required: true
      // 为一个二维数组，数组内为一个对象，有title和content属性
    }
  }
}
</script>
<style lang="scss">

.sg-table {
	text {
		white-space: nowrap;
	}
	.table-line {
		padding: 0 38rpx;
		width: 100%;
		height: 66rpx;
		line-height: 66rpx;
		display: flex;
		font-size: 28rpx;
		margin-bottom: 10rpx;
		view {
			flex: 1;
			display: flex;
			text {
				flex: 1;
			}
		}
	}

	.white {
		background-color: #F0F2F5;
		.title {
			color: #797979;
		}

		.content {
			color: #000000;
		}

	}

	.black {
		background-color: #D4D6DB;
		.title {
			color: #ffffff;
		}

		.content {
			color: #000000;
		}

	}
}

</style>
